<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="/stylesheets/index.css">
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				document.getElementById('mail').focus();

				function sendLogin() {
					var xhr = new XMLHttpRequest();
					var params = 'mail=' + document.getElementById('mail').value + '&pass=' + document.getElementById('pass').value;
					xhr.open('POST', document.location.protocol + "//" + document.location.host, true);
					xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

					xhr.onreadystatechange = function () {
						if (xhr.readyState === 4 && xhr.status === 200) {
							document.getElementById('message').style.color = '#008000';
							document.getElementById('message').innerHTML = 'Success. Logging in ...';
							setTimeout(function () {
								document.location.href = document.location.protocol + '//' + document.location.host;
							}, 1000);
						} else if (xhr.status !== 200) {
							document.getElementById('message').style.color = '#ff0000';
							document.getElementById('message').innerHTML = xhr.responseText;
						} else {
							document.getElementById('message').style.color = '#000000';
							document.getElementById('message').innerHTML = 'Waiting ...';
						}
					}

					xhr.send(params);
				}

				document.getElementById('login').addEventListener('click', function () {
					sendLogin();
				});

				document.getElementById('mail').addEventListener('keydown', function (event) {
					if (event.which === 13) {
						sendLogin();
					}
				});

				document.getElementById('pass').addEventListener('keydown', function (event) {
					if (event.which === 13) {
						sendLogin();
					}
				});
			});
		</script>
		<title>Agile Planning Integration Tool</title>
	</head>
	<body>
		<noscript>
			<div id="noscript">
				<div id="noscriptcover"></div>
				<div id="noscripttext">JavaScript is disabled</div>
			</div>
		</noscript>
		<div id="form">
			<div class="label" style="text-align:center;margin-bottom:10px">Please login:</div>
			<div>
				<div style="float:left;width:410px">
					<div>
						<div class="label" style="float:left;width:180px">
							Email:
							<span style="color:#ff0000">*</span>
						</div>
						<input class="input" id="mail" type="text">
					</div>
					<div>
						<div class="label" style="clear:left;float:left;margin-top:4px;width:180px">
							Password:
							<span style="color:#ff0000">*</span><br/>
							<span style="font:15px serif;position:relative;top:-16px">or security code</span>
						</div>
						<input class="input" id="pass" style="margin-top:4px" type="password">
					</div>
				</div>
				<div id="login">
					<img src="/images/done.png">
				</div>
			</div>
			<div id="message"></div>
		</div>
	</body>
</html>